<%@page import="com.xnx3.j2ee.Global"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://www.xnx3.com/java_xnx3/xnx3_tld" prefix="x"%>
<jsp:include page="/wm/common/head.jsp">
	<jsp:param name="title" value="列表" />
</jsp:include>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport"
	content="initial-scale=1.0, user-scalable=no, width=device-width">
<style>
html, body, #container {
	width: 100%;
	height: 100%;
}
</style>
<title>多边形的绘制和编辑</title>
<link rel="stylesheet"
	href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" />
<script
	src="https://webapi.amap.com/maps?v=1.4.15&key=054a3cfa27924834d3c8dd3b00282804&plugin=AMap.PolyEditor,AMap.DistrictSearch,AMap.MouseTool,AMap.Scale,AMap.MarkerClusterer"></script>
<script src="https://res.zvo.cn/msg/msg.js"></script>
<script src="https://res.zvo.cn/jquery/jquery-2.1.4.js"></script>

<script
	src="https://a.amap.com/jsapi_demos/static/demo-center/js/demoutils.js"></script>
</head>
<body>
<div id="container"></div>
<script type="text/javascript">
var map = new AMap.Map("container", {
	center: [116.400274, 39.905812],
	zoom: 14,
	resizeEnable:true//不开启则无法触发resize事件
});
</script>
<script src="https://res.zvo.cn/jquery/jquery-2.1.4.js"></script>
<script type="text/javascript">
//计算经纬度数组中的中心点
function getCenterPoint(data){
	var lng = 0.0,
	lat = 0.0;
	for(var i = 0; i < data.length; i++){
		if($.isEmptyObject(data[i])){continue;}
			lng = lng + parseFloat(data[i]['lng']);
			lat = lat + parseFloat(data[i]['lat']);
		}
	lng = lng / data.length;
	lat = lat / data.length;
	return {lng : lng, lat : lat};
}
function searchArea(tas){
	if(tas.length > 1){
		//drawBounds(value);
			var myStr = tas;
			var strArray = myStr.split(",");
			for(var i = 0; i < strArray.length; i++){
			var loskj = strArray[i];
			drawBounds(loskj);
		}
	}
}
var lis = String()
//查询行政区
searchArea('${area}')
//画出行政区图形
function drawBounds(areaName) {
		var district = null;
		var polygons = [];
	//加载行政区划插件
	if(!district){
	//实例化DistrictSearch
		var opts = {
			subdistrict: 0,   //获取边界不需要返回下级行政区
			extensions: 'all',  //返回行政区边界坐标组等具体信息
			level: 'district'  //查询行政级别为 市
		};
		district = new AMap.DistrictSearch(opts);
	}
	//行政区查询
	//district.setLevel(document.getElementById('level').value)
	district.search(areaName, function(status, result) {
		//map.remove(polygons)//清除上次结果
		console.log(result);
		if(status == 'no_data'){
		msg.info('未搜到');
		return;
		}
	polygons = [];
	var bounds = result.districtList[0].boundaries;
		if (!bounds) {
		//没有搜到
			return;
		}
	for (var i = 0, l = bounds.length; i < l; i++) {
		//生成行政区划polygon
		var polygon = new AMap.Polygon({
			strokeWeight: 1.5,
			path: bounds[i],
			fillOpacity: 0.4,
			fillColor: '#80d8ff',
			strokeColor: '#0091ea',
			});
		}
		map.add(polygon)
		map.setFitView(polygon);//视口自适应
		//对覆盖物进行初始化设置
		// newPolygonSet(polygon);
	});	
}
//对新建的覆盖物进行设置，设置其右键菜单、事件等
function newPolygonSet(polygon){
	//覆盖物的path经纬度列表
	if(polygon != null){
//设置可以拖动点
	var areaEditor = new AMap.PolyEditor(map, polygon);
//创建右键菜单
	var contextMenu = new AMap.ContextMenu();
	contextMenu.addItem("编辑(数据多会卡死浏览器)", function () {
		//编辑下只留有保存功能
	
	areaEditor.open();
	//编辑调用方法
	}, 1);
	contextMenu.addItem("保存", function () {
		if(polygon.w.path.length == 1){
			//这种情况是新增加了一个围栏，又对新增加的围栏进行了编辑
			updateSave(polygon.w.path[0]);
		}else{
			//这种情况是对已有的围栏点开直接进行编辑
			updateSave(polygon.w.path);
		}
		areaEditor.close();
		//contextMenu.removeItem('保存');
		}, 2);
	contextMenu.addItem("删除", function () {
		map.remove(polygon);
		document.getElementById('addWanggeWeilan').style.display = '';
	}, 2);
	//绑定鼠标右击事件——弹出右键菜单
	polygon.on('rightclick', function (e) {
		contextMenu.open(map, e.lnglat);
	});
	}
}
//画出当前网格的区域
function wangge(bianl){
var polygon = new AMap.Polygon({
	path: bianl,
	strokeColor: "#FF33FF", 
	strokeWeight: 6,
	strokeOpacity: 0.2,
	fillOpacity: 0.4,
	fillColor: '#ff0000',
	zIndex: 50,
})
map.add(polygon);
//缩放地图到合适的视野级别
map.setFitView([ polygon ]);
//对覆盖物进行初始化设置
newPolygonSet(polygon);
}
//画出其他网格的区域
function wanggeqt(bianl){
var polygon = new AMap.Polygon({
	path: bianl,
	strokeColor: "#FF33FF", 
	strokeWeight: 6,
	strokeOpacity: 0.2,
	fillOpacity: 0.4,
	fillColor: '#467500',
	zIndex: 50,
})
map.add(polygon);
//缩放地图到合适的视野级别
map.setFitView([ polygon ]);
//对覆盖物进行初始化设置
//newPolygonSet(polygon);
}
//在地图上画出除了当前网格区域的其他区域
wanggeqt(${pathqt})
//画出当前网格的区域
wangge(${pathdq})
</script>
<!-- 新增覆盖物 -->
<div id="addWanggeWeilan" onclick="drawPolygon(${id});" class="layui-btn layui-btn-normal" style="cursor:pointer;position: absolute; top: 20px; right: 20px; border-radius:5px; font-weight:700;">添加电子围栏</div>
<script>
	if(${ishaveWangge}){
		//如果已经有网格围栏了，那么不允许再创建其他围栏，一个网格只允许一个围栏
		document.getElementById('addWanggeWeilan').style.display = 'none';
	}
</script>

<!-- 鼠标新增覆盖物 -->
<script type="text/javascript">
var mouseTool = new AMap.MouseTool(map);
mouseTool.on('draw', function(event) {
	var map_m = event.obj.getPath();
	var allArea = zuobiaoToJson(map_m);
	var olop = []
	for(var i = 0; i < map_m.length; i++){
		var area2 = [map_m[i].lng,map_m[i].lat];
		olop.push(area2);
	}
	var polygon = new AMap.Polygon({
 		path: olop,
 		strokeColor: "#FF33FF", 
		strokeWeight: 6,
		strokeOpacity: 0.2,
		fillOpacity: 0.4,
		fillColor: '#1791fc',
		zIndex: 50,
	})
	map.add(polygon);
	mouseTool.close(true);
	//对覆盖物进行初始化设置
	newPolygonSet(polygon);
});
//画一个覆盖物出来。画完这一个覆盖物后就不能在画了。再画要再触发这个方法
function drawPolygon ( id ) {
	mouseTool.polygon({
		strokeColor: "#FF33FF", 
		strokeOpacity: 1,
		strokeWeight: 6,
		strokeOpacity: 0.2,
		fillColor: '#1791fc',
		fillOpacity: 0.4,
		// 线样式还支持 'dashed'
		strokeStyle: "solid", 
		// strokeStyle是dashed时有效
		// strokeDasharray: [30,10],
	});
}
//修改某个
function updateSave(path){
	if(path != null ){
	var allArea = zuobiaoToJson(path);
	//var id = ${id};
	msg.loading('保存中');
	wm.post('/agency/wangge/saveAll.json',{
		all: JSON.stringify(allArea),
		id: ${id}
	},function(data){
		msg.close();	//关闭“加载中”的等待提示
		checkLogin(data);	//验证登录状态。如果未登录，那么跳转到登录页面
		if(data.result == '1'){
			//获取数据成功
			msg.success('保存成功', function(){
			parent.window.location.reload();
			});
		
		}else{
			//接口返回失败，弹出失败提示
			msg.failure(data.info);
		}
	});
	}
}
/**
 * 将  119.034474,36.720771,119.130948,36.786514,119.287846,36.78074,119.177983,36.640923 格式坐标转换为 [{"lon":119.034474,"lat":36.720771},{"lon":119.287846,"lat":36.78074},{"lon":119.177983,"lat":36.640923}]
 */
function zuobiaoToJson(path){
	var allArea = [];
	//var olop = []
	for(var i = 0; i < path.length; i++){
	var area = {
			lon : path[i].lng,
			lat: path[i].lat
		};
		var area2 = [path[i].lng,path[i].lat];
		allArea.push(area);
		//olop.push(area2);
	}
	return allArea;
}

</script>

</body>


<jsp:include page="/wm/common/foot.jsp"></jsp:include>
